<template>
    <div class="bg">
        <transition name="ts">
            <div class="login_wrap" @keyup.enter="keyUps" ref="wrap" v-show="flag">
            <div class="inner">
                <h2 class="title">请登录</h2>
                <div class="line"></div>
                <div class="all">
                    <div class="login_left">
                        <div class="username">
                            <i class="el-icon-user-solid ico"></i>
                            <el-input v-model="formLabelAlign.name"></el-input>
                        </div>
                        <div class="username">
                            <i class="el-icon-s-goods ico"></i>
                            <el-input v-model="formLabelAlign.password" :type="isshows ? 'text' : 'password'"> <i slot="suffix" ref="icon" :class="isshows ?  'iconfont icon-yanjing' : 'iconfont icon-biyanjing'" @click="ishow"></i></el-input>
                        </div>
                    </div>
                    <el-button class="login_right" @click="login" :disabled="Disabled">登录</el-button>
                </div>
            </div>
        </div>
        </transition>
    </div>
</template>

<script>
// 引入节流器
import { throttle } from '@/utils/choke.js'
// 引入获取token的接口
import { getToken } from '@/api/power.js'
export default {
    data() {
      return {
        // 表单数据集合
        formLabelAlign: {
          name: '',
          password: '',
        },
        // 密码小眼睛信号量
        isshows : false,
        // 登录按钮点击频率越是条件
        Disabled : false,
        // 登陆成功动画信号量
        flag : true
      };
    },
    created(){
        // 清除本地缓存
        sessionStorage.clear()
    },
    methods:{
        // 密码小眼睛隐藏 与 展示方法
        ishow(){
            this.isshows = !this.isshows
        },
        // 点击登录事件
        login(){
            // 调用节流器
            throttle(true,this)
            // 请输入用户名
            if(this.formLabelAlign.name === ''){
                this.$message({
                    type : 'warning',
                    message : '请输入用户名'
                })
                return
            // 请输入密码
            }else if(this.formLabelAlign.password === ''){
                this.$message({
                    type : 'warning',
                    message : '请输入密码'
                })
                return
            }
            // 拼接请求参数 去掉空白
            const param = {
                username : this.formLabelAlign.name.trim(),
                password : this.formLabelAlign.password.trim()
            }
            // 调用获取token接口
            getToken(param).then(res=>{
                console.log(res,'我是获取token');
                // 如果登陆成功 ，则 token存到本地
                if(res.code === 200){
                    // 将token缓存到本地
                    sessionStorage.setItem('token',res.token)
                    // 权限缓存到本地
                    sessionStorage.setItem('userName',JSON.stringify(res.data))
                    // userId缓存到本地
                    sessionStorage.setItem('userId',res.userId)
                    // 设置仓库id
                    this.$store.commit('setUserId',res.userId)
                    // 调用actions，向store存入数据
                    this.$store.dispatch('setUserPower',{userId : this.$store.state.userId})
                    // console.log(this.$store);
                    // 动画的信号量
                    this.flag = false
                    // 延迟两秒在跳转，目的为了展示动画
                    setTimeout(() => {
                        // 跳转到登录页        
                        this.$router.replace('/')
                        // 提示登陆成功
                        this.$message({
                        type : 'success',
                        message : '登陆成功'
                    })
                    }, 700);
                }else{
                    // 登陆失败
                    this.$message({
                        type : 'warning',
                        message : res.msg
                    })
                }
            })
        },
        // 键盘回车登录事件
        keyUps(e){
            if(e.keyCode === 13){
                this.login()
            }
        }
    }
}
</script>

<style scoped>
    .bg{
        width: 100%;
        height: 100%;
        background-image: url('../../assets/image/9.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 900px;
    }
    .login_wrap{
        min-width: 600px;
        width: 600px;
        height: 400px;
        box-shadow:0px 0px 10px 10px #20AAE9;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }
    .inner{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .4);
        overflow: hidden;
    }
    .title{
        color: #EFF0F9;
        margin: 15px auto;
        text-align: center;
        width: 200px;
        font-size: 30px;
        letter-spacing: 20px;
        text-shadow: 2px 2px 10px  #20AAE9;
        user-select:none;
    }
    .line{
        background-color: #20AAE9;
        height: 1px;
        width: 520px;
        margin: 0 auto;
        box-shadow:0px 0px 5px 1px #20AAE9;
    }
    .all{
        width: 100%;
        height: 180px;
        box-sizing: border-box;
        padding: 30px 40px;
        display: flex;
        justify-content: space-between;
    }
    .login_left{
        width: 380px;
        height: 100%;
    }
    .login_right{
        width: 120px;
        height: 100%;
        color: #fff;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        box-shadow:0px 0px 5px 5px #20AAE9;
        border-radius: 20px;
        cursor: pointer;
        user-select:none;
        background-color: rgba(0,0,0,.5);
    }
    .login_right:hover {
        background-color: #0a5d83;
    }
    button.is-disabled:hover {
        color: #fff;
        background-color: rgba(0,0,0,.5);
    }
    .ico{
        font-size: 25px;
        color: #fff;
        border: 1px solid #fff;
        width: 60px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 14px;
        box-shadow:0px 0px 5px 5px #20AAE9;
        margin-right: 5px;
        position: absolute;
        z-index: 10;
    }   
    .username{
        position: relative;
        margin-bottom: 40px;
    }
    >>> .username .el-input .el-input__inner{
        background-color: rgba(0,0,0,.5) !important;
        caret-color:#fff;
        color: #fff;
        outline: none;
        box-shadow:0px 0px 5px 5px #20AAE9;
        border-radius: 10px;
        padding-left: 80px;
    }
    .iconfont{
        padding-top: 10px;
        display: block;
        cursor: pointer;
        font-size: 16px !important;
    }

    .ts-leave{
        width: 600px;
        height: 400px;
    }
    .ts-leave-to{
        height: 1px;
    }
    .ts-leave-active{
        transition: all .5s;
    }
</style>